<template>
  <div class="sidebar">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="sidebarStatus"
      :router='true'
    >
      <el-menu-item index="/Home">
        <i class="el-icon-service"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/GanJi">
        <i class="el-icon-service"></i>
        <span slot="title">GanJi</span>
      </el-menu-item>

      <el-submenu index="/Charts">
        <template slot="title">
          <i class="el-icon-view"></i>
          <span slot="title">Charts</span>
        </template>
        
        <el-menu-item index="/Chart1">Chart1</el-menu-item>
        <el-menu-item index="/Chart2">Chart2</el-menu-item>
      </el-submenu>
      <el-submenu index="/tables">
        <template slot="title">
          <i class="el-icon-location-outline"></i>
          <span slot="title">tables</span>
        </template>
        <el-menu-item index="/tables">table1</el-menu-item>
      </el-submenu>
      <el-menu-item  index="/Setting">
        <i class="el-icon-setting"></i>
        <span slot="title">Setting</span>
      </el-menu-item>
    </el-menu>
  </div>
    
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Sidebar',
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters({
         sidebarStatus: 'sidebarTodos',
    }),
    activeIndex(){
      const thisRoutPath = this.$route.path
      console.log(thisRoutPath)
      return thisRoutPath
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    
  }
}
</script>

<style scoped lang="scss">
  .sidebar{
     background-color:#545c64 ; 
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-width: 64px;
    }
    .el-menu-vertical-demo{
      min-height: 100vh;
      height: 100%;
      border: 0;
      .el-submenu, .el-menu-item{
        text-align: left;
      }
      .el-submenu .el-menu-item{
        padding-left: 60px !important;
      }
    }
    .el-menu--collapse{
      overflow: hidden;
    }
  }
</style>
